<!doctype html>
<html lang="zh-CN" ng-app="dataDisplay" ng-cloak>
<head>
    <meta charset="utf-8">

    <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="/css/style.css" />
    <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/lib/fontAwesome/css/font-awesome.min.css" media="all" />

    <link rel="stylesheet" type="text/css" href="/lib/angular-ui-select/dist/select.min.css" />
    <link rel="stylesheet" type="text/css" href="/lib/angular-toastr/dist/angular-toastr.css" />
    <link rel="stylesheet" type="text/css" href="/lib/angular-ui-grid/ui-grid.css" />
    <link rel="stylesheet" href="/lib/angular-ui-select/dist/select.css">

    <link href="/lib/bootstrap-datetime/css/jquery.datetimepicker.css" rel="stylesheet" media="screen">
    <script src="/lib/bootstrap-datetime/js/jquery.datetimepicker.js"></script>
    <title><%-name%></title>
</head>
<body ng-controller="dataDisplayController">
    <% if(crud[1] == 1) {
        var add = crud[0],update = crud[2],remove = crud[3];
    %>

    <!---------------------- Search Section ---------------------->
    <section for="searchArea">
        <fieldset id="searchArea">
        <h2 class="group-head"><span>搜索条件</span></h2>
            <div class="margin-lr">
        <%  for(var i in columns) {
            if(columns[i].searchable) {
                if(columns[i].dataType == "string" || columns[i].dataType == "array") { %>
                <div class="form-group col-md-3 col-sm-3">
                    <label for="<%-columns[i].columnName %>" class="search-label"><%-columns[i].displayName %></label>
                    <input type="text" class="form-control" id="<%-columns[i].columnName %>">
                </div>
                <% } else if (columns[i].dataType == "date"){ %>
                <div class="col-md-6 col-sm-6 kick-padding-margin">
                <div class="form-group col-md-6 col-sm-6">
                    <label for="<%-columns[i].columnName %>From" class="search-label"><%-columns[i].displayName %></label>
                    <div class="input-group ">
                        <input class="form-control time-picker" id="<%-columns[i].columnName %>From" ng-click="showTimePicker('<%-columns[i].columnName %>From')"/>
                        <span class="input-group-addon glyphicon glyphicon-remove" style="position: relative;top:-0.5px"></span>
                    </div>
                </div>
                <div class="form-group col-md-6 col-sm-6">
                    <label>&nbsp;</label>
                    <div class="input-group ">
                        <input class="form-control time-picker" id="<%-columns[i].columnName %>To" ng-click="showTimePicker('<%-columns[i].columnName %>To')">
                        <span class="input-group-addon glyphicon glyphicon-remove" style="position: relative;top:-0.5px"></span>
                    </div>
                    <span style="position: relative;left:-18px;top:-28px">~</span>
                </div></div>
                <% } else if(columns[i].dataType instanceof Object){ %>
                <div class="form-group col-md-3 col-sm-3">
                    <label for="<%-columns[i].columnName %>" class="search-label"><%-columns[i].displayName %></label>
                    <div easy-select id="<%-columns[i].columnName %>" class="form-control" <% if(columns[i].dataType.setting.multi){ %>multiple<% }%>>
                    <% for (var opt in columns[i].dataType.options) { %>
                        <option value="<%-opt%>"><%-columns[i].dataType.options[opt] %></option>
                    <%}%>
                    </div>
            </div>
                <%}}%>
        <% } %>
            <div class="col-md-6 col-sm-6 col-md-offset-6 col-sm-offset-6">
                <button class="btn btn-sm btn-success form-btn" id="search-<%-_id %>" ng-click="search()">&nbsp;&nbsp;搜索&nbsp;&nbsp;</button>
                <button class="btn btn-sm btn-info form-btn" ng-click="resetForm()" >&nbsp;&nbsp;重置&nbsp;&nbsp;</button>
            </div>
            </div>
        </fieldset>
    </section>

    <!----------------------- Grid Section ----------------------->
    <section for="dtGrid">

        <div>
            <h2 class="group-head"><span>详细数据</span></h2>
        </div>


        <form class="form-horizontal" style="padding: 6px 12px" ng-submit="!dataForm.$invalid && save()" id="dataForm" name="dataForm">
            <div class="margin-lr">
            <input type="hidden" id="<%-_id %>" />
            <div class="btn-toolbar grid-toolbar" role="toolbar">
                <div class="pull-right">
                    <button type="button" class="btn btn-default btn-sm grid-menu-btn" style="margin-left: 20px" ng-click="export()" >&nbsp;&nbsp;导出&nbsp;&nbsp;</button>
                </div>
                <div class="pull-right">
                    <button type="submit" class="btn btn-warning btn-sm grid-menu-btn" >&nbsp;&nbsp;保存&nbsp;&nbsp;</button>
                </div>
            </div>
            <div ui-grid="gridOption" theme="bootstrap" ng-style="{height:(gridOption.data.length*30)+30+'px'}" ui-grid-resize-columns ui-grid-pagination>
            </div>
            </div>
        </form>

    </section>

    <div class="modal fade" id="extraModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width:80%">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="extraModalTitle">
                    </h4>
                </div>
                <div class="modal-body" id="extraModalBody">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">关闭
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div>
        <script>
            $(".glyphicon-remove").each(function(){
                $(this).click(function(){
                    $(this).prev().val("");
                });
            })

            $(".time-picker").each(function(){
                var _self = this;
                setTimeout(function(){
                    $(_self).click();
                },500);
            });

            function changeMinus(element){
                $(element).attr("class","glyphicon glyphicon-minus-sign extra-row");
            }
            function changePlus(element){
                setTimeout(function(){$(element).attr("class","glyphicon glyphicon-plus-sign extra-row");},300);
            }
        </script>
    <% } else { %>
        <script>alert("无读取权限")</script>
    <% } %>
    <script src="/lib/angular/angular.js"></script>
    <script src="/lib/angular-ui-select/dist/select.min.js"></script>
    <script src="/lib/angular-toastr/dist/angular-toastr.tpls.js"></script>
    <script type="text/javascript" src="/js/angular-loading.js"></script>
    <script type="text/javascript" src="/js/angular-spinner.js"></script>
    <script src="/lib/angular-ui-grid/ui-grid.min.js"></script>
    <script src="/lib/angular-ui-select/dist/select.js"></script>
    <script src="/js/grid-pagination.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/displayController.js"></script>
</body>
</html>